<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>商品详情</title>
  <!-- jquery -->
  <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
  <!-- bootstrap -->
  <link rel="stylesheet" type="text/css"
        th:href="@{/bootstrap/css/bootstrap.min.css}"/>
  <script type="text/javascript" th:src="@{/bootstrap/js/bootstrap.min.js}">
  </script>
  <!-- layer -->
  <script type="text/javascript" th:src="@{/layer/layer.js}"></script>
  <!-- common.js -->
  <script type="text/javascript" th:src="@{/js/common.js}"></script>
</head>
<body>
<div class="panel panel-default">
  <div class="panel-heading">秒杀商品详情</div>
  <div class="panel-body">
    <span>没有收货地址的提示。。。</span>
  </div>
  <table class="table" id="goods">
    <tr>
      <td>商品名称</td>
      <td colspan="3" th:text="${goods.goodsName}"></td>
    </tr>
    <tr>
      <td>商品图片</td>
      <td colspan="3"><img th:src="@{${goods.goodsImg}}" width="200" height="200"/></td>
    </tr>
    <tr>
      <td>秒杀开始时间</td>
      <td><p th:text="${#dates.format(goods.startDate,'yyyy-MM-dd HH:mm:ss')}"></p></td>
      <td id="seckillTip">
        <input id="remainSeconds" type="hidden" th:value="${remainSecKill}">
        <span th:if="${status eq 0}">秒杀倒计时
          <span id="countDown" th:text="${remainSecKill}"></span>
          <span>秒</span>
        </span>
        <span th:if="${status eq 1}">秒杀进行中</span>
        <span th:if="${status eq 2}">秒杀已结束</span>
      </td>

      <td>
        <!--<form id="seckillFrom" method="get" action="/secKill/doSecKill">-->
          <input type="hidden" id="goodsId" th:text="${goods.id}" th:value="${goods.id}">
          <button class="btn btn-primary btn-block" type="button" id="buyButton" >立即秒杀</button>
        <!--</form>-->
      </td>

    </tr>
    <tr>
      <td>商品原价</td>
      <td colspan="3" th:text="${goods.goodsPrice}"></td>
    </tr>
    <tr>
      <td>秒杀价</td>
      <td colspan="3" th:text="${goods.seckillPrice}"></td>
    </tr>
    <tr>
      <td>库存数量</td>
      <td colspan="3" th:text="${goods.stockCount}"></td>
    </tr>
  </table>
</div>
</body>
<section>


<script>
  let goodsId = $("#goodsId").val();
  $(function(){
    countDown();

    $("#buyButton").click(function bunClick(){
      $("#buyButton").click(function(){
        $.ajax({
          url: "/secKill/doSecKill",
          type: "POST",
          data: {
            goodsId:goodsId
          },
          success: function (data){
            let res = JSON.parse(data);
            if (res.success){
              getResult(goodsId);
            }else {
              layer.alert(res.message);
            }
          },
          error: function(){
            alert("查询出错");
          }
        });
      });
    });

  });

  function getResult(goodsId){
    //加载动画
    //layer.alert("===="+goodsId)
      //g_showLoading();
      $.ajax({
        url:"/secKillOrder/getResult",
        type:"GET",
        data:{
            goodsId: goodsId
        },
        success: function (data) {
            let res = JSON.parse(data);
            if (res.success){
              let flag = res.data;
              layer.alert("正在查询订单状态");
              if (flag < 0){
                layer.msg("秒杀失败");
              }else if (flag == 0){
                //轮询
                setTimeout(function(){
                  getResult(goodsId);
                },1000);
              }else if(flag == 1){
                layer.alert("每个用户只能购买一次");
              }else {
                layer.confirm("秒杀成功,是否查看订单",{btn:["确定","取消"]},
                function () {
                  window.location.href="/secKillOrder/toOrderDetail?orderId="+flag;
                },
                function (){
                  layer.close();
                }
                )
              }
            }
        },
        error: function (){
          layer("查询失败");
        }
      });
  }

  function countDown(){
    var remainSeconds = $("#remainSeconds").val();
    var timeout;
    if (remainSeconds > 0){
      $("#buyButton").attr("disabled",true)
      timeout = setTimeout(function (){
        $("#countDown").text(remainSeconds-1);
        $("remainSeconds").val(remainSeconds-1);
        countDown();
      },1000);
    }else if (remainSeconds == 0){
      $("#buyButton").attr("disabled",false);
      if (timeout){
        clearTimeout(timeout);
      }
      $("#seckillTip").html("秒杀进行中");
    }else{
      $("#buyButton").attr("disabled",true);
      $("#seckillTip").html("秒杀已经结束")
    }
  }
</script>

</section>
</html>